<template>
  <div class="nav-container">
    <Navbar ref="navbar"></Navbar>
  </div>
  <div class="main-container">
    <Header ref="header"></Header>
    <OurExpertise ref="ourExpertise"></OurExpertise>
    <TrustUs ref="trustUs" :imgs="trustUsImgs"></TrustUs>
    <UseCases ref="useCases"></UseCases>
    <Steps ref="steps"></Steps>
    <FootCarousel ref="footCarousel"></FootCarousel>
    <Footer ref="footer"></Footer>
    <a-button type="primary">
      Primary
    </a-button>
    <!-- <a-date-picker/> -->
  </div>
</template>

<script lang="ts">
  import {
    ref,
    reactive
  } from 'vue'

  import Navbar from '../components/Navbar/Navbar.vue'
  import Header from './components/Header/Header.vue'
  import OurExpertise from './components/OurExpertise/OurExpertise.vue'
  import TrustUs from '../components/TrustUs/TrustUs.vue'
  import UseCases from './components/UseCases/UseCases.vue'
  import Steps from './components/Steps/Steps.vue'
  import FootCarousel from '../components/FootCarousel/FootCarousel.vue'
  import Footer from '../components/Footer/Footer.vue'
  export default {
    name: 'Home',
    components: {
      Navbar,
      Header,
      OurExpertise,
      TrustUs,
      UseCases,
      Steps,
      FootCarousel,
      Footer
    },
    setup(props: any, context: any) {
      // trustUsImgs
      const trustUsImgs = reactive(
        [{
            url: 'https://www.mobapi.com/uploads/2017/09/client-edf.png',
            alt: 'EDF Guyane',
            loading: true,
          },
          {
            url: 'https://www.mobapi.com/uploads/2017/09/client-po.png',
            alt: 'Plastic Omnium',
            loading: true,
          },
          {
            url: 'https://www.mobapi.com/uploads/2017/09/client-mcdo.png',
            alt: 'Mc Donalds',
            loading: true,
          },
          {
            url: 'https://www.mobapi.com/uploads/2017/09/client-fitnesspark.png',
            alt: 'Fitness Park',
            loading: true,
          },
          {
            url: 'https://www.mobapi.com/uploads/2017/09/client-madiana.png',
            alt: 'Cinéma Madiana',
            loading: true,
          },
          {
            url: 'https://www.mobapi.com/uploads/2017/09/client-greentechnologie.png',
            alt: 'Green Technologie',
            loading: true,
          },
        ])

      const navbar = ref < HTMLInputElement > (),
        header = ref < HTMLInputElement > (),
        ourExpertise = ref < HTMLInputElement > (),
        trustUs = ref < HTMLInputElement > (),
        useCases = ref < HTMLInputElement > (),
        steps = ref < HTMLInputElement > (),
        footCarousel = ref < HTMLInputElement > (),
        footer = ref < HTMLInputElement > ()
      // @returns
      return {
        trustUsImgs,
        navbar,
        header,
        ourExpertise,
        trustUs,
        useCases,
        steps,
        footCarousel,
        footer
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "language": "语言",
  "hello": "你好,世界!"
  },
  "en": {
  "language": "Language",
  "hello": "hello, world!"
  },
  "ja": {
  "language": "言語",
  "hello": "こんにちは、世界！"
  }
  }
</i18n>

<style scoped>
  /** transparent **/
  .nav-container {
    position: absolute;
    z-index: 999;
    width: 100%;
    text-align: center;
  }

  /** transparent **/
</style>